<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="authorizePhone h100p w100p">
    <img src="https://qzdsoft.oss-cn-shenzhen.aliyuncs.com/bg.png" class="bg" />
    <img src="https://qzdsoft.oss-cn-shenzhen.aliyuncs.com/logo.png" class="logo" />
    <view class="desc">采购、销售，快人一步，信息真实，就是在e商机</view>
    <button v-if="!isCheck" @click="getPhoneNumber1" class="btn">快捷绑定手机号</button>
    <button v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber2" class="btn">快捷绑定手机号</button>
    <view class="content-bottom flca" @click="changeLastTipsState">
      <image v-if="!isCheck" class="bottom-check mr4" src="@/static/img/global/check-false.png" />
      <image v-else class="bottom-check mr4" src="@/static/img/global/check-true.png" />
      <view class="txtBox">
        <text class="cGY2 f12 h16 l16">我已阅读同意</text>
        <text class="cYE f12 h16 l16" @click="jumpToPage('/pages/global/protocol3')">《服务协议》</text>
        <text class="cYE f12 h16 l16" @click="jumpToPage('/pages/global/protocol2')">《隐私协议》</text>
        <text class="cGY2 f12 h16 l16">并授权e商机并获得本机号码</text>
      </view>
    </view>
    <view class="tipBox w100p">
      <view class="w100p tc cYE"> -登录后您将获得以下权益- </view>
      <view class="flb mt20">
        <view class="flc w25p">
          <view class="w100p flca">
            <view class="imgBox flca"> <image class="tipImg" src="@/static/img/global/btn1.png" /></view>
          </view>
          <view class="tc h20 cYE w100p mt6">免费发布</view>
        </view>
        <view class="flc w25p">
          <view class="w100p flca">
            <view class="imgBox flca"> <image class="tipImg" src="@/static/img/global/btn2.png" /></view>
          </view>
          <view class="tc h20 cYE w100p mt6">优质信息</view>
        </view>
        <view class="flc w25p">
          <view class="w100p flca">
            <view class="imgBox flca"> <image class="tipImg" src="@/static/img/global/btn3.png" /></view>
          </view>
          <view class="tc h20 cYE w100p mt6">快速联系</view>
        </view>
        <view class="flc w25p">
          <view class="w100p flca">
            <view class="imgBox flca"> <image class="tipImg" src="@/static/img/global/btn4.png" /></view>
          </view>
          <view class="tc h20 cYE w100p mt6">专属客服</view>
        </view>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom" class="ask flch" :is-mask-click="false" background-color="#fff" border-radius="20rem 20rem 0 0">
      <view class="flca w100p">
        <image class="topImg" :src="src" />
      </view>
      <view class="cGY3 bold f20 w100p tc">服务和隐私授权</view>
      <view class="mt10 lbBox">
        <text class="cGY2 f12 h20 l20">感谢选择e商机小程序，我们非常重视您的个人信息安全和隐私保护，依据最新法律要求，使用我们的产品前，清仔细阅读并同意</text>
        <text class="cYE f12 h20 l20" @click="jumpToPage('/pages/global/protocol3')">《服务协议》、</text>
        <text class="cYE f12 h20 l20" @click="jumpToPage('/pages/global/protocol2')">《隐私协议》</text>
        <text class="cGY2 f12 h20 l20">，以便我们向您提供更优质的服务！我们承诺将尽全力保护您个人信息及合法。再次感谢您的信任！</text>
      </view>
      <view class="bottom flb">
        <view class="grayBtn btnBottom tc" @click="closePopup">拒绝</view>
        <view class="orangeBtn btnBottom tc" @click="agreePopup">同意并继续</view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
export default {
  mixins: [commonMxins],
  data() {
    return {
      isCheck: false,
      src: 'https://qzdsoft.oss-cn-shenzhen.aliyuncs.com/3079e4eb12a54a3eb09811ddf2b4bd70.png'
    };
  },
  async onLoad(option) {
    if (option.type === 'init') {
      this.globalData.apiInit = true;
    }
  },
  async onShow() {
    await this.appInit();
  },
  methods: {
    async getPhoneNumber1() {
      this.$refs.popup.open('bottom');
    },
    async getPhoneNumber2(e) {
      let code = e.detail.code;
      if (code) {
        let data = { code, openidWx: this.globalData.loginInfo.openidWx };
        let res1 = await api.request({ url: '/appUser/phoneNumberLoginWx', data, needAuth: false, method: 'GET' });
        if (res1.data) {
          this.globalData.Authorization = res1.data.Authorization;
          this.globalData.loginInfo.status = '1';
          this.globalData.userInfo.phoneNumber = res1.data.phoneNumber;
          let res = await api.request({ url: '/appUser/updateAppUser', data: { id: this.globalData.loginInfo.userId, safePhoneNumber: res1.data.phoneNumber } });
          if (res.code === 200) {
            uni.showToast({ title: '手机号绑定成功', icon: 'success', duration: 2000 });
            await this.$async.delay(2000);
            uni.navigateBack({ delta: 1 });
          } else {
            uni.showToast({ title: res.msg, icon: 'none', duration: 2000 });
          }
        }
      } else {
        uni.showToast({ title: '取消绑定', icon: 'success', duration: 2000 });
      }
    },
    changeLastTipsState() {
      this.isCheck = !this.isCheck;
    },
    agreePopup() {
      this.isCheck = true;
      this.$refs.popup.close();
    },
    closePopup() {
      this.$refs.popup.close();
    }
  }
};
</script>
<style lang="scss" scoped>
.authorizePhone {
  position: relative;
  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .logo {
    width: 57rem;
    height: 79rem;
    position: absolute;
    left: calc(50% - 28rem);
    top: 25%;
  }
  .desc {
    top: calc(25% + 92rem);
    text-align: center;
    font-size: 14rem;
    line-height: 21rem;
    color: #000;
    width: 100%;
    position: absolute;
  }
  .btn {
    top: calc(25% + 155rem);
    left: calc(50% - 160rem);
    font-size: 18rem;
    line-height: 50rem;
    color: #fff;
    position: absolute;
    width: 320rem;
    text-align: center;
    height: 50rem;
    border-radius: 30rem;
    background: rgba(255, 124, 0, 1);
  }
  .content-bottom {
    top: calc(25% + 215rem);
    left: calc(50% - 160rem);
    position: absolute;
    padding: 0 6rem;
    box-sizing: border-box;
    .txtBox {
      width: 290rem;
      height: 32rem;
      line-height: 16rem;
    }
    .bottom-check {
      width: 13rem;
      height: 13rem;
      margin-right: 4rem;
    }
  }
  .tipBox {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 190rem;
    padding: 30rem;
    box-sizing: border-box;
    .lbImg {
      width: 205rem;
      height: 24rem;
    }
    .imgBox {
      height: 46rem;
      width: 46rem;
      background: #ff7c00;
      border-radius: 50%;
      .tipImg {
        height: 23rem;
        width: 23rem;
      }
    }
  }
}
.ask {
  position: relative;
  .topImg {
    width: 335rem;
    height: 183rem;
    margin: 0 auto;
  }
  .lbBox {
    padding: 20rem;
  }
  .bottom {
    padding: 12rem 20rem;
    box-sizing: border-box;
    .btnBottom {
      width: 170px;
      height: 36px;
      border-radius: 50px;
      font-size: 14rem;
      line-height: 36rem;
    }
    .grayBtn {
      color: #383838;
      background: #e5e5e5;
    }
    .orangeBtn {
      color: #fff;
      background: #ff7c00;
    }
  }
}
</style>
